<template>
  <!-- <h1>名师列表</h1> -->
  <scroll-view class="container" scroll-y :show-scrollbar="false" enhanced>
    <view class="teacher-list">
      <view
        class="teacher-item"
        v-for="teacher in teacherList"
        :key="teacher.id"
      >
        <view class="teacher-detail">
          <img
            :src="teacher.avatar"
            :alt="teacher.name"
            class="teacher-avatar"
          />
          <view class="teacher-name">{{ teacher.name }}</view>
        </view>

        <view class="teacher-intro multi-row">
          {{ teacher.intro }}
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TeacherList",
});
</script>

<script setup lang="ts">
import { reqGetTeacherList } from "@/api/teacher";
import type { ReqTeacherItemsType } from "@/api/type";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
// 获取名师列表
// 定义初始化名师列表
const teacherList = ref<ReqTeacherItemsType>([]);
const getTeacherList = async (id: string) => {
  const res = await reqGetTeacherList(1, 10);
  // console.log(res);
  teacherList.value = res.items;
};
onLoad((options) => {
  // console.log(options);
  const id = options!.id;
  getTeacherList(id);
});
</script>

<style scoped>
.teacher-list {
  display: flex;
  flex-wrap: wrap;
  /* width: 100vw; */
  /* justify-content: space-evenly; */
}
.teacher-item {
  width: 300rpx;
  height: 450rpx;
  background-color: #eeeeee;
  margin-top: 20rpx;
  margin: 20rpx 37rpx;
}
.teacher-avatar {
  width: 115px;
  height: 115px;
  border-radius: 145px;
}
.teacher-intro {
  padding: 20rpx;
  border-top: 1px solid #e2e2e2;
  color: #a1a7b2;
  font-size: 12px;
  height: 40rpx;
}
.teacher-name {
  font-size: 14px;
  color: #a1a7b2;
  padding: 20rpx 0;
}
.teacher-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 020rpx 0;
}
</style>
